// 封装一个通用的数据懒加载
import { ref } from 'vue-demi'
import { useIntersectionObserver } from '@vueuse/core'
export const useLazyData = (apiFn) => {
  // 调用接口的结果数据
  const list = ref([])
  // 被监听的DOM元素
  const target = ref(null)
  // 监听DOM元素进入可视区的方法
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    if (isIntersecting) {
      apiFn().then((ret) => {
        list.value = ret.result
        stop()
      })
    }
  })
  return {
    list,
    target
  }
}
